<template>
 <a-tabs v-model:activeKey="activeKey" @change="onChange" v-bind="tabsComputed.options" class="i-tabs">
     <template v-for="(item) in tabsComputed.list" :key="item.value" >
         <a-tab-pane :key="item.value"   v-if="item.isShow!==false">
             <template #tab>
                    <span>{{item.label}}</span>
                    <span  v-if="item.badgeCount"><a-badge :count="item.badgeCount" :overflowCount='999999' :number-style="badgeStyle" /></span>
             </template>
         </a-tab-pane>
     </template>
  </a-tabs>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, PropType, computed, watch } from 'vue'
import { TabsInterface } from './ITableInterface'
export default defineComponent({
  name: 'i-tabs',
  props: {
    tabsOption: {
      type: Object as PropType < TabsInterface >,
      required: true
    },
    defaultTab: {
      type: String as PropType < string >,
      required: false,
      default: () => ''
    }
  },
  setup (props, ctx) {
    const tabsComputed = computed(() => props.tabsOption)
    const badgeStyle = {
      backgroundColor: '#fff',
      color: '#999',
      marginLeft: '5px',
      boxShadow: '0 0 0 1px #d9d9d9 inset'
    }
    const activeKey = ref<string>('')
    const onChange = (activeKey:string) => {
      const changeData = tabsComputed.value.list.find(item => item.value === activeKey)
      const changeIndex = tabsComputed.value.list.findIndex(item => item.value === activeKey)
      ctx.emit('changTab', changeData || null, changeIndex)
    }
    onMounted(() => {
      if (props.tabsOption.list.length > 0) {
        getTabData()
      }
    })
    const setbadgeCount = (strList:string[]) => {
      tabsComputed.value.list.forEach((item, index) => {
        if (item.badgeCount) {
          item.badgeCount = strList[index] ? strList[index] : ''
        }
      })
    }
    const getTabData = () => {
      if (props.defaultTab) {
        const data = tabsComputed.value.list.find(item => item.value === props.defaultTab)
        activeKey.value = data ? data.value : ''
        onChange(activeKey.value)
      } else {
        const data = tabsComputed.value.list.find(item => item.isShow !== false)
        activeKey.value = data ? data.value : ''
        onChange(activeKey.value)
      }
    }
    watch(() => props.tabsOption.list, () => {
      getTabData()
    }, {
      deep: true
    })
    return {
      setbadgeCount,
      badgeStyle,
      tabsComputed,
      onChange,
      activeKey
    }
  }
})

</script>
